<div class="plan-edit container-fluid">
  <div class="row">
    <div class="edit-toolbar col-xl-12">
      <div class="title">
        <span *ngIf="!model?.id">新建计划</span>
        <span *ngIf="model?.id">编辑计划</span>
      </div>
      <div class="buttons">
        <button [routerLink]="['/pages/org/' + orgId + '/prj/' + prjId + '/implement/plan/list']" type="button"
                class="btn btn-primary btn-with-icon btn-sm back">
          <i class="fa fa-arrow-circle-left"></i>返回
        </button>
      </div>
    </div>
  </div>
  <hr/>

  <form [formGroup]="form" class="my-validate-form">
    <div class="org-edit">
      <div class="form-group row">
        <label class="col-sm-1 col-form-label"><span>名称</span></label>
        <div class="col-sm-5">
          <input type="text" class="form-control" name="name" formControlName="name"
                 [(ngModel)]="model.name" #name>
        </div>

        <label class="col-sm-1 col-form-label"><span>耗时(小时)</span></label>
        <div class="col-sm-5">
          <input type="number" class="form-control" name="estimate" formControlName="estimate"
                 [(ngModel)]="model.estimate" #estimate>
        </div>
      </div>
      <div class="form-group row">
        <label class="col-sm-1 col-form-label"><span>开始时间</span></label>
        <div class="col-sm-5">
          <div class="input-group my-flatpickr-date">
            <input [(ngModel)]="model.startTime" formControlName="startTime" type="text" readonly="readonly"
                   class=" form-control form-control-sm" placeholder="yyyy-mm-dd" data-input #startTime>
            <a class="input-group-addon" title="选择" data-toggle>
              <i class="fa fa-calendar"></i>
            </a>
            <a class="input-group-addon" title="清除" data-clear>
              <i class="fa fa-remove"></i>
            </a>
          </div>
        </div>

        <label class="col-sm-1 col-form-label"><span>结束时间</span></label>
        <div class="col-sm-5">
          <div class="input-group my-flatpickr-date">
            <input [(ngModel)]="model.endTime" formControlName="endTime" type="text" readonly="readonly"
                   class=" form-control form-control-sm" placeholder="yyyy-mm-dd" data-input>
            <a class="input-group-addon" title="选择" data-toggle>
              <i class="fa fa-calendar"></i>
            </a>
            <a class="input-group-addon" title="清除" data-clear>
              <i class="fa fa-remove"></i>
            </a>
          </div>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-1 col-form-label">项目版本</label>
        <div class="col-sm-5">
          <select [(ngModel)]="model.verId" formControlName="verId" class="form-control" name="verId">
            <option *ngFor="let entry of vers" value="{{entry.id}}">
              <span>{{entry.label}}</span>
            </option>
          </select>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-1 col-form-label"><span>简介</span></label>
        <div class="col-sm-11">
              <textarea type="text" class="form-control" name="descr" formControlName="descr"
                        [(ngModel)]="model.descr" #descr></textarea>
        </div>
      </div>

<!--      <div class="form-group row">
        <div class="offset-sm-1 col-sm-11">
          <div class="form-check">
            <label class="form-check-label">
              <input type="checkbox" class="form-check-input" name="disabled" formControlName="disabled"
                     [(ngModel)]="model.disabled" #disabled>
              &nbsp;&nbsp;归档
            </label>
          </div>
        </div>
      </div>-->

      <div class="test-sets form-group row">
        <label class="col-sm-1 col-form-label">
          <span>测试任务</span>
        </label>

        <div class="col-sm-11 task-list">
          <table class="table">
            <thead>
            <tr>
              <th style="width: 50px;" class="id">编号</th>
              <th>标题</th>
              <th>创建人</th>
              <th>经办人</th>
              <th>用例来源项目</th>
              <th style="width: 300px;">执行状况</th>
              <th>测试环境</th>
              <th style="width: 250px;" class="opt">
                <span *ngIf="form.valid" prj-privilege [privs]="'test_plan:maintain'" (click)="editTask()" class="link no-underline">新建任务</span>
              </th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of model.tasks; let i = index;">
              <td>{{i+1}}</td>
              <td [routerLink]="['/pages/implement/task/execution', item.id]" class="pointer">{{item.name}}</td>
              <td>{{item.userName}}</td>
              <td>
                <span *ngFor="let a of item.assignees; let i = index;">
                  <span>{{a.nickname}}</span><span *ngIf="i != item.assignees.length-1">, </span>
                </span>
              </td>
              <td>{{item.caseProjectName}}</td>
              <td>
                <execution-bar [data]="item"></execution-bar>
              </td>
              <td>{{ item.envName }}</td>
              <td class="center">
                <span prj-privilege [privs]="'test_plan:maintain'" (click)="editTaskCases(item, i)" class="link no-underline">选用例</span>
                <span prj-privilege [privs]="'test_plan:maintain'" (click)="editTask(item, i)" class="link no-underline">编辑</span>
                <span prj-privilege [privs]="'test_plan:delete'" (click)="removeSet(item, i)" class="link no-underline">删除</span>
                </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>

    </div>

    <div class="form-group row">
      <div class="offset-sm-1  col-sm-11">
        <button (click)="save()" type="button" class="btn btn-primary" [disabled]="!form.valid">保存</button>
        &nbsp;
        <button [routerLink]="['/pages/org/' + orgId + '/prj/' + prjId + '/implement/plan/list']" type="button" class="btn btn-default">取消</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button prj-privilege [privs]="'test_plan:maintain'" (click)="delete()" *ngIf="model.id" type="button" class="btn btn-danger">删除</button>
      </div>
    </div>

    <div class="form-group row">
      <div class="offset-sm-1 col-sm-11">
        <div class="validate-errors">
          <div class="validate-error" *ngFor="let msg of formErrors">
            <div>{{ msg }}</div>
          </div>
        </div>
      </div>
    </div>

  </form>

</div>

<pop-dialog #modalDelete (confirm)="deleteConfirm()" [title]="modalTitle">
  确认删除名为"{{model.name}}"的执行计划？
</pop-dialog>

<pop-dialog #modalRemoveSet (confirm)="removeSetConfirm()" [title]="modalTitle">
  <div *ngIf="testSet"> 确认删除名为"{{testSet.name}}"的测试集? </div>
</pop-dialog>
